<template>
	<view class="pet_list base-maxwidth">
		<top-nav
			:back="myback" 
			:topMainBackGroundColor="topMainBackGroundColor" 
			:navMarginTop="navMarginTop"
			:topBackgroundColor="topBackgroundColor"
			:topHeight="topHeight"
			:title="title">
		</top-nav>
		<view class="content">
			
			<u-avatar :src="avatarUrl" :size="avatartSize" :mode="aspectFill" @click="chooseImage"></u-avatar>
			<u-form>
				<u-form-item borderBottom="true" class="item1"  label="宠物名字" labelWidth="70px" required="true">
					<u-input input-align='right' border="none" placeholder="输入宠物名字" placeholderStyle="color: #dedede;text-align: right" v-model="petName"></u-input>
				</u-form-item>
				<u-form-item borderBottom="true" label="宠物性别" labelWidth="70px" required="true">
					<radio-group class="radioGroup" @change="onRadioChange">
						<label for="" class="radio">
							<radio value="男" checked="true" color="#f67180">男</radio>
						</label>
						<label for="" class="radio" >
							<radio value="女" color="#f67180">女</radio>
						</label>
					</radio-group>
				</u-form-item>
				<u-form-item borderBottom="true" label="宠物品种" labelWidth="70px" @click="chooseKinds" required="true">
					<u-input v-model="breeds"  border="none" placeholder="点击选择品种" placeholderStyle="color: #dedede;text-align: right" input-align='right'>
					</u-input>
					<u-icon
						name="arrow-right"
						color="#dedede"
						slot="right"
					></u-icon>
				</u-form-item>
				<u-form-item borderBottom="true" label="出生日期" labelWidth="70px" @click="chooseCander">
					<u-input border="none" placeholder="点击选择生日" v-model="birthDate"  placeholderStyle="color: #dedede;text-align: right" input-align='right'>
					</u-input>
					<u-icon
						name="arrow-right"
						color="#dedede"
						slot="right"
					></u-icon>
				</u-form-item>
				<u-form-item borderBottom="true" label="体重(kg)" labelWidth="70px">
					<u-input border="none" placeholder="输入体重" v-model="weight"  placeholderStyle="color: #dedede;text-align: right" input-align='right'>
					</u-input>
				</u-form-item>
				<u-form-item borderBottom="true" label="疫苗" labelWidth="70px">
					<u-input border="none" placeholder="输入疫苗信息" v-model="vaccine"  placeholderStyle="color: #dedede;text-align: right" input-align='right'>
					</u-input>
					<u-icon
						name="arrow-right"
						color="#dedede"
						slot="right"
					></u-icon>
				</u-form-item>
				<u-form-item label="简介" prop="intro" :label-position="labelPosition">
					<u-input v-model="desc"  border="none" placeholder="简单描述一下吧~"  />
				</u-form-item>
				</u-form>
			</view>
			<button class="save" @click="saveClick">保存</button>
			<u-datetime-picker :show="showCander" mode="date" :minDate="1041350400000" :maxDate="maxData" @confirm="confirmDate" @close="closedCander"></u-datetime-picker>
			<!-- <u-calendar minDate="2002-01-01" :show="showCander" @close="closedCander" @confirm="confirmDate"></u-calendar> -->
			<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import topNav from '@/components/topnav/topNav.vue'
import cellGroup from '../../../uni_modules/uview-ui/libs/config/props/cellGroup';
import { addPetRequest }  from '@/service/pets/pet.js'
import { getAge } from '@/utils/tools.js'
import imageToBase64 from '@/utils/imageToBase64.js'
import image from 'uview-ui/libs/config/props/image';
import dayjs from '@/utils/dayjs.js'
import storage from '@/utils/storage.js'
import { mapGetters } from 'vuex';
	export default {
		components: {
			topNav
		},
		data() {
			return {
				myback: {
					show: true
				},
				title: '宠物档案',
				topMainBackGroundColor: '#fff',
				topBackgroundColor: '#fff',
				navMarginTop: 0,
				topHeight: 50,
				avatarUrl: '',
				avatarTemUrl: '',
				avatartSize: 80,
				avatarIcon: 'camera-fill',
				rightIcon: 'arrow-right',
				desc: '',
				breeds: '',
				birthDate: '',
				vaccine: '',
				weight: '',
				sex: '男',
				petName: '',
				
				showCander: false,
				maxData: Date.now()
			}
		},
		onLoad() {
			console.log(this.maxData,'34234')
		},
		methods: {
			getValue(mainItem,navId) {
				this.breeds = mainItem
				console.log('this.breeds', this.breeds)
				console.log(mainItem, navId)
			},
			chooseCander() {
				console.log('点击了')
				this.showCander = true
			},
			closedCander() {
				this.showCander = false
			},
			confirmDate(value) {
				console.log(value.value,'ddd');
				this.showCander = false
				this.birthDate = dayjs(value.value).format('YYYY-MM-DD')
			},
			radioChange() {},
			onRadioChange(events) {
				this.sex = events.mp.detail.value
			},
			async saveClick() {
				const _this = this
				let userId = storage.get('userInfo')
				
				// const userId =  storage.get('userInfo')
				
				console.log('userInfo', userId.id)
				const age = getAge(this.birthDate)
				console.log(this.avatarTemUrl)
				const iamge = await imageToBase64(this.avatarTemUrl)
				console.log('aaa',userId.id,this.breeds,age,this.sex,iamge, this.vaccine,this.weight,this.desc)
				const data = {
					user_id: userId.id,
					name: this.petName,
					age: age,
					gender: this.sex,
					breed: this.breeds,
					photo: iamge,
					vaccine: this.vaccine,
					weight: this.weight,
					description: this.desc
				}
				addPetRequest(data).then(res => {
					_this.$refs.uToast.show({
						type: 'success',
						message: '添加成功'
					})
					console.log('添加成功', res)
					
				})
			},
			beforeUpload() {
				console.log('上传之前')
			},
			submit() {
				this.$refs.uUpload.upload();
			},
			chooseImage() {
				const _this = this
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'],
					success: function(res) {
						console.log('rse',res)
						_this.avatarTemUrl = res.tempFiles[0].path
						_this.avatarUrl = res.tempFiles[0].path
					}
				})
			},
			chooseKinds() {
				uni.navigateTo({
					url: '/pages/pets/cpns/d-swiper-type'
				})
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	/deep/ .topMain .title {
		position: relative;
		left: -16px;
		margin: 0 auto;
		font-weight: 600;
	}
	.pet_list {
		height: 100vh;
		background-color: #f8f8f8;
	}
	
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		padding-top: 20px;
	}
	
	/deep/.content .u-upload {
		position: relative;
		width: 80px;
		height: 80px;
		overflow: hidden;
		flex: none;
	}
	
	/deep/ .content .u-upload .u-avatar::after {
		position: absolute;
		content: '';
		right: 3px;
		bottom: 1px;
		width: 20px;
		height: 20px;
		background-image: url('@/static/images/chat/take-pic.png');
		background-size: contain;
	} 
	
	/deep/.u-form {
		width: 90vw;
		border-radius: 12px;
		overflow: hidden;
		margin-top: 20px;
	} 

	/deep/ .u-form-item {
		padding: 0 15px 0 15px;
		background-color: #fff;
		height: 60px;
		line-height: 40px;
		.u-form-item__body__left__content__label {
			color: #a0a0a0;
		}
	}
	
	/deep/.u-form .u-form-item:nth-child(1) {
		margin-bottom: 20px;
		border-radius: 12px;
	}
	
	/deep/.u-form .u-form-item:nth-child(4) {
		border-bottom-left-radius: 12px;
		border-bottom-right-radius: 12px;
		// padding-bottom: 20px;
	}
	
	/deep/.u-form .u-form-item:last-child {
		margin-top: 20px;
		padding-bottom: 20px;
		height: 60px;
	}
	
	.radioGroup {
		margin-left: auto;
		.radio {
			margin-right: 10px;
		}
	}
	.save{
		margin-top: 20px;
		background-color: #eb818f;
		width: 80vw;
		border-radius: 24px;
	}
</style>